<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>验证手机号</title>
	<link rel="stylesheet" type="text/css" href="__CSS__api.css" />
	<link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
	<style>
		.aui-bar-nav .aui-iconfont {
			position: relative;
			font-family: "aui_iconfont" !important;
			font-size: 0.75rem;
			color: #E73C5C;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			height: 2.4rem;
		}

		.aui-bar-nav {
			background-color: #fff;
		}

		.aui-icon-tu {
			height: 2.4rem;
			width: 45px;
			background: url('__IMG__left.png') no-repeat 0.5rem center;
			background-size: 20px 20px;
		}

		.aui-bar-nav .aui-pull-right {
			padding-right: 0.75rem;
		}

		.aui-bar-nav .aui-title {
			font-size: 0.9rem;
			color: #333333;
			font-weight: 500;
		}
		body{
      background-color: #FFFFFF;
    }
   .warrp{
     width: 100%;
     height: 100%;
     padding: 1.4rem 1.5rem 0 1.5rem;
   }
   .title{
     width: 100%;
     height: 3.5rem;
     font-size:1.15rem;
     color: #333333;
     line-height:1.15rem;
     padding-bottom:2.4rem;
     font-weight: bold;
   }
   .phone{
      margin-top: 0.8rem;
      font-size:0.7rem;
      color:#333333;
      line-height:0.6rem;
      font-weight: bold;
   }
   .shuru{
     width: 100%;
     height: 2.35rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   .code{
     width: auto;
     height: 2.25rem;
     font-size:0.65rem;
     color:#B3B3B3;
     line-height:2.35rem;
   }
   input[type="text"], input[type="password"], input[type="tel"] {
     width: 9rem;
     height: 2.25rem;
     color: #010101;
     background: none;
     outline: none;
     font-size: 0.8rem;
     font-weight: 600;
     line-height:2.25rem;
     padding: 0 0 0 0;
     margin: 0 0 0 0;
   }

   input::-webkit-input-placeholder {
     color: #B3B3B3;
     font-size: 0.75rem;
     font-weight: normal;
     line-height:2.25rem;
   }
   .login-btn{
     margin-top: 2.25rem;
     width:100%;
     height:2.5rem;
     background:#E73C5C;
     border-radius:5px;
     font-size:0.8rem;
     color:#FFFFFF;
     line-height:2.5rem;
     text-align: center;
     font-weight: bold;
   }
   .zhuce{
		 height: 0.65rem;
     font-size:0.7rem;
     color: #E73C5C;
     line-height:0.65rem;
     margin-top: 0.9rem;
     float: right;
   }
   .sanfang{
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 3.55rem;
   }
   .tu img{
     width: 2.25rem;
     height: 2.25rem;
   }
   .xieyi{
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 9.3rem;
   }
   .xiaobiao{
     width: 0.75rem;
     height: 0.75rem;
   }
   .tongyi{
     font-size: 0.65rem;
     color: #999999;
     font-size: 0.6rem;
   }
   .tongyi span{
     color: #E73C5C;
   }
    .code{
        width: auto;
        height: 2.35rem;
        font-size:0.65rem;
        color:#E73C5C;
        line-height:2.35rem;
        text-align: center;
    }
    .code1{
        width: auto;
        height: 2.35rem;
        font-size:0.65rem;
        color:#B3B3B3;
        line-height:2.35rem;
        text-align: center;
    }
	</style>
</head>

<body>
	<header class="aui-bar aui-bar-nav underLine" style="padding-top:25px;" id="header">
		<a class="aui-pull-left" tapmode="active" onclick="history.go(-1)"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
	</header>

	<body>
	    <div class="warrp">
	      <div class="title">
	        验证手机号
	      </div>
	      <div class="phone">
	        手机号
	      </div>
	      <div class="shuru underLine">
	          <input type="tel" placeholder="请输入手机号" value="{$user_phone.user_phone}" name="phone" disabled />
	        <div class="code" id='code' onclick="getcode()">
	          发送验证码
	        </div>
	      </div>
	      <div class="phone">
	          验证码
	      </div>
	      <div class="shuru underLine">
	          <input type="tel" placeholder="请输入验证码" id="phone" name="phonecode" />
	      </div>
	      <div class="login-btn" onclick="phoneNext()" tapmode='active'>
	            下一步
	      </div>
	    </div>
</body>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__layer_mobile/layer.js"></script>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript">
	var onClickTime;//点击时间
	var onClickTime1;//当前时间
	var isOnclick = true;
    //获取验证码
    function getcode(){
        var phone = $('input[name="phone"]').val();
        $.ajax({
            url:'{:url("Login/getPhoneCode")}',
            data:{phone:phone,type:1},
            dataType:'JSON',
            type:'post',
            success:function (data) {
                if(data.status == 200){
                    layer.open({
                        content: '发送成功'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    //60S倒计时
                    if (isOnclick) {
                        onClickTime=Math.floor((new Date().getTime())/1000);
                        isinerval = setInterval('CountDown()', 1000);
                        isOnclick = false;
                    }
                }else{
                    layer.open({
                        content: data.msg
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                }
            }
        })
    }

    //验证码60秒倒数
    function CountDown () {
        onClickTime1=60-(Math.floor((new Date().getTime())/1000)-onClickTime);
        var code = $api.byId('code');
        $api.removeCls(code, 'code');
        $api.addCls(code, 'code1');
        if (onClickTime1 < 1) {
            $api.html(code, '重新获取');
            clearInterval(isinerval);
            isOnclick = true;
            return;
        }
        $api.html(code, '倒计时' + onClickTime1 + 's');
    }

    //下一步
	function phoneNext(){
	    var phonecode = $('input[name="phonecode"]').val();
        var phone = $('input[name="phone"]').val();
        $.ajax({
            url:'{:url("Login/ajaxPhone")}',
            data:{phonecode:phonecode,phone:phone},
            dataType:'JSON',
            type:'post',
            success:function (res) {
                if(res.status == 200){
                    location.href = '{:url("Login/bandPhone")}';
                }else{
                    layer.open({
                        content: res.msg
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                }
            }
        })
    }
</script>

</html>
